<style lang="scss" scoped>
  .padcentersanhua{
    width: 39vw;
    margin-top: 0.781vw;
    .title{
      font-size: 0.833vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #00D1E3;
      opacity: 1;
      margin-bottom: 0.625vw;
    }
    .d_lis{
      margin-top: 0.52vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .li{
        width: 19.53vw;
        .head{
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          .per{
            position: absolute;
            top:0;
            left: 1.04vw;
            font-size: 0.573vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #E3E3E3;
          }
          .h{
            margin-right:  1.04vw;
            font-size: 0.573vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #E3E3E3;
            opacity: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .block {
              width: 0.885vw;
              height: 0.468vw;
              background: #BA9A2C;
              opacity: 1;
              margin-right: 0.52vw;
            }
            .block2{
              background-color: #40A0FC;
            }
            .block3{
              background-color: #429C80;
            }
          }
        }
      }
    }

  }
</style>
<template>
  <div class="padcentersanhua bot_s">
    <div class="title">三化统计</div>
    <div class="d_lis">
      <div class="li">
        <div class="head">
          <div class="per">(%)</div>
          <div class="h"><span class="block block1"></span>无害率</div>
          <div class="h"><span class="block block2"></span>减量率</div>
          <div class="h"><span class="block block3"></span>资源率</div>
        </div>
        <sanhualine  :commonEchartsObj="countDeliverRecord"></sanhualine>
      </div>
      <div class="li">
        <div class="head">
          <div class="per">(%)</div>
          <div class="h"><span class="block block1"></span>无害率</div>
          <div class="h"><span class="block block2"></span>减量率</div>
          <div class="h"><span class="block block3"></span>资源率</div>
        </div>
        <sanhualine  :commonEchartsObj="countDeliverRecord2"></sanhualine>
      </div>
    </div>
  </div>

</template>

<script>
  import { mapGetters } from "vuex";
  import moment from 'moment'
  import {getThreeIndexStatistics,getThreeIndexRegionStatistics} from "@/api/screem";
  import sanhualine from './sanhualine.vue'

  export default {
    name: "padcentersanhua",
    data() {
      return {
        initTimer: null,
        countDeliverRecord: {
          echarts_name: `sanhualine1`,
          line_list: [],
          line_date: [],
          num: 5
        },
        countDeliverRecord2: {
          echarts_name: `sanhualine2`,
          line_list: [],
          line_date: [],
          num: 3
        },
      };
    },
    created() {
      this.init()
    },
    mounted() {
    },
    props: [''],
    components: {sanhualine},
    methods: {
      init() {
        getThreeIndexStatistics()
          .then(res => {
            let arr1 = [], arr2 = [],arr3 = [];
            this.countDeliverRecord.line_date = [];
            (res.data.harmless || []).forEach(item => {
              this.countDeliverRecord.line_date.push(item.time + '月')
              arr1.push(item.number)
            });
            (res.data.decrement || []).forEach(item => {
              arr2.push(item.number)
            });
            (res.data.resource || []).forEach(item => {
              arr3.push(item.number)
            });

            var series = [
              {
                name: '无害率',
                type: 'line',
                symbol: 'none',
                label: {
                  show: false,
                  // position: 'insideRight'
                },
                barWidth: 10,
                colorClass: '#BA9A2C',
                itemStyle: {
                  color: '#BA9A2C',
                },
                data: arr1
              },
              {
                name: '减量率',
                type: 'line',
                symbol: 'none',
                colorClass: '#40A0FC',
                label: {
                  show: false,
                  // position: 'insideRight'
                },
                itemStyle: {
                  color: '#40A0FC',
                },
                data: arr2
              },
              {
                name: '资源率',
                type: 'line',
                symbol: 'none',
                colorClass: '#429C80',
                label: {
                  show: false,
                  // position: 'insideRight'
                },
                itemStyle: {
                  color: '#429C80',
                },
                data: arr3
              },
            ]

            this.$set(this.countDeliverRecord, 'line_list', series);
          })
        getThreeIndexRegionStatistics()
          .then(res => {
            let arr1 = [], arr2 = [],arr3 = [];
            this.countDeliverRecord2.line_date = [];
            (res.data || []).forEach(item => {
              this.countDeliverRecord2.line_date.push(item.region)
              arr1.push(item.harmless)
              arr2.push(item.decrement)
              arr3.push(item.resource)
            });

            var series = [
              {
                name: '无害率',
                type: 'line',
                symbol: 'none',
                label: {
                  show: false,
                  // position: 'insideRight'
                },
                barWidth: 10,
                colorClass: '#BA9A2C',
                itemStyle: {
                  color: '#BA9A2C',
                },
                data: arr1
              },
              {
                name: '减量率',
                type: 'line',
                symbol: 'none',
                colorClass: '#40A0FC',
                label: {
                  show: false,
                  // position: 'insideRight'
                },
                itemStyle: {
                  color: '#40A0FC',
                },
                data: arr2
              },
              {
                name: '资源率',
                type: 'line',
                symbol: 'none',
                colorClass: '#429C80',
                label: {
                  show: false,
                  // position: 'insideRight'
                },
                itemStyle: {
                  color: '#429C80',
                },
                data: arr3
              },
            ]

            this.$set(this.countDeliverRecord2, 'line_list', series);
          })
      }
    }
  };
</script>


